<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典PC端两栏布局</title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .warp{
            margin:0 auto;
            width:960px;
            height: 100px;;
        }
        .left,.right{
            float: left;
            height:100%;
        }
        .left{
            margin-right: 20px;
            width: 220px;
            background: #F14C5C;
        }
        .right{
            width:720px;
            background: #F5A623;
        }
        .secondLeft{
            width: 200px;
            height: 100px;
            background: red;
            float: left;
            display: table;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        .secondRigh{
            margin-left: 210px;
            height: 100px;
            background: yellow;
            text-align: center;
            line-height: 100px;
        }
        .thirdLeft{
            width: 200px;
            height:100px;
            background: yellow;
            float: left;
        }
        .thirdRight{
            width:150px;
            height: 100px;
            background: green;
            float: right;
        }
        .thirdMiddle{
            height:100px;
            background: red;
            margin-left: 220px;
            margin-right: 160px;
        }

        /* 父元素 如果不设置 relative 那么 第四种 左右边两边栏的元素就跑到 body 上面去了  我们设置 postions 为realative */
        .fourthBorder{
            padding: 0px;
            margin: 0px;
            position: relative;
        }

        .fourthLeft{
            background: yellow;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .fourthMiddle{
            height: 200px;
            margin: 0 220px;
            background: red;
        }
        .fourthRight{
            height: 200px;
            width: 200px;
            position: absolute;
            top: 0;
            right: 0;
            background: green;
        }

        /*清除浮动*/
        .warpper{
            overflow: hidden;
        }

        /*第三种  三栏目布局  缺点是 中间一块在 宽度很少的时候被挤到右边去了*/
        .fifthMiddle{
            width:100%;
            float: left;
        }

        .fifthMiddle .main{
            margin: 0 220px;
            background: red;
        }

        .fifthLeft{
            width: 200px;
            height:200px;
            float: left;
            background: green;
            margin-left: -100%;
        }

        .fifthRight{
            width: 20px;
            height:200px;
            float: left;
            background: yellow;
            margin-left: -200px;
        }

        /*flex 布局*/
        .flexWraper{
            display: flex;
        }

        .sixleft{
            width:200px;
            height: 100px;
            background: green;
        }

        .sixmiddle{
            width:100%;
            background: red;
            margin: 10px 20px;  /*使用 0 的时候不需要加px rem 等这些单位*/
        }

        .sixright{
            width: 200px;
            height: 100px;
            background: yellow;
        }



        body{
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body >
    <div class="warp clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div>
        <div class="secondLeft">定宽</div>
        <div class="secondRigh">自适应</div>
    </div>
    <!--很奇怪如果把 右边和中间交换位置 就不行了!!!!!!!!!-->
    <div>
        <div class="thirdLeft">第三种左边</div>
        <div class="thirdRight">第三种右边</div>
        <div class="thirdMiddle">第三种中间</div>
    </div>
    <!--使用position 来实现三栏布局 当父元素有内外边距时，会导致中间栏的位置出现偏差
     还有一点是父元素的父元素比如body 本身也是带着内外边距的
    默认是8px 我们设置body margin 和 padding 为0-->
    <div  class="fourthBorder">
        <div class="fourthLeft">第四种左栏</div>
        <div class="fourthMiddle">第四种中间栏</div>
        <div class="fourthRight">第四种右栏</div>
    </div>
    <div class="warpper">
        <div class="fifthMiddle">
            <div class="main">第五种中间</div>
        </div>
        <div class="fifthLeft">
            第五种左边
        </div>
        <div class="fifthRight">
            第五种右边
        </div>
    </div>

    <!--测试第四种 flex 布局 -->
    <div class="flexWraper">
        <div class="sixleft"> 第六种左边 </div>
        <div class="sixmiddle">第六种中间</div>
        <div class="sixright">第六种右边</div>
    </div>

</body>
</html>